<template>
  <div class="flex box_cont">
    <!--  -->
    <div ref="boxfull" v-loading="loading" :style="{width:isAnswer ? '65%' : '100%'}"
         class="box_cont topic_cont flex_column_between">
      <audio ref="audio" :src="voiceUrl" class="po" controls style="display:none" @ended="playEnd"></audio>
      <div class="tit_cont">
        <div class="font36 bold">关卡{{ article && article.sort || '' }}：{{ article && article.title || '' }}</div>
        <div class="w-full level_cont flex_center_between">
          <div class="flex_center level_row font20 ">
            参考时长 {{ article && article.duration || 0 }}″ 难度系数
            <div v-if="article" class="flex_center_between">
              <img v-for="i in article.difficultyRate" :key="i" alt="" class="level_icon"
                   src="@/assets/img/collect_3.png"/>
              <template v-if="article.difficultyRate < 5">
                <img v-for="i in 5 - article.difficultyRate" :key="'e' + i" alt=""
                     class="level_icon" src="@/assets/img/collect.png"/>
              </template>
            </div>
          </div>
          <div class="print_cont flex_c_c font20 themeFont cur" @click="zh_chGo(true)">
            {{ z_c }}
          </div>
          <div class="print_cont flex_c_c font20 themeFont cur" @click="printFun">
            <img class="icon" src="@/assets/img/print_3.png"/>
            打印
          </div>
        </div>
      </div>

      <!-- 文章内容  -->
      <div v-if="z_c == '转英文'">
        <div v-if="article" ref="refWord" class="text_cont flex-center" v-html="article.translate"
           ></div>
           <empty v-else text="暂无内容" type="1"/>
      </div>
      <div v-if="z_c == '转中文'">
        <div v-if="article" ref="refWord" class="text_cont flex-center" v-html="article.content"
             @mouseup.stop="onmouseup($event)"></div>
        <empty v-else text="暂无内容" type="1"/>
      </div>

      <div class="btn_cont flex_center_between">
        <p class="left_num flex_center">
          <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;margin-right: 10px;"
                     type="warning" @click="articlePlayAudio()">
            <div class="flex_c_c"><img src="@/assets/img/play_1.png"
                                       style="margin-right: 12px;width: 3rem"/>{{ playStatus ? '取消' : '点读' }}
            </div>
          </el-button>
          <audio v-if="playStatus" ref="audioArticle" :src="article.voiceFile ? article.voiceFile.url : ''" autoplay
                 controls controlsList="nodownload" style="width: 56rem;" @ended="articlePlayEnd"></audio>
        </p>
        <div class="flex-1 flex justify-end">
          <el-button v-if="!wordShowStatus" id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;"
                     type="warning" @click="wordShow">
            <div class="flex_c_c"><img src="@/assets/img/sc.png" style="margin-right: 12px;width: 3rem"/> 生词</div>
          </el-button>
          <el-button v-if="wordShowStatus" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="primary"
                     @click="wordHide">
            <div class="flex_c_c cur"><img src="@/assets/img/zt.png" style="margin-right: 12px;width: 3rem"/> 隐藏</div>
          </el-button>
          <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="warning"
                     @click="rememberWord">
            <div class="flex_c_c cur"><img src="@/assets/img/sj.png" style="margin-right: 12px;width: 3rem"/> 识记</div>
          </el-button>
          <el-button v-if="!isAnswer" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="primary"
                     @click="showQuestionFun">
            <div class="flex_c_c cur"><img src="@/assets/img/zt.png" style="margin-right: 12px;width: 3rem"/> 做题</div>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 答题 -->
    <div v-if="isAnswer" class="answer_cont flex flex-column">
      <div class="w_full answer_tit flex_center">
        <div class="title flex_c_c">
          <img class="icon" src="@/assets/img/time_1.png"/>
          <span class="text">{{ clockTime }}</span>
        </div>
      </div>
      <template v-if="questionShow">
        <div class="head_cont cur" @mouseup.stop="onmouseup_word($event)">
          <span class="tag font24"><span class="font32">{{ questionIndex + 1 }}</span>/{{ questions.length }}</span>
          {{ question && question.stem || '' }}
        </div>
        <!-- 选项 -->
        <div v-for="(item, index) in question.option" :key="index"
             :class="{status: answerlist && answerlist.length && checkOptionChoose(item)}" class="flex_center option_row font32 cur"
             @click="isChoose ? chooseOptionFun(item) : ''">
          <div>
            <div :class="{status1: answerlist && answerlist.length && checkOptionChoose(item)}"
                 class="option flex_c_c font-26">{{ item.prefix }}
            </div>
          </div>
          <p class="word_text" @dblclick="onmouseup_word()" @mousedown="mouseDownFn"
             @mouseup.stop="onmouseup_word($event)">{{ item.content }}</p>
        </div>
        <div class="flex-1 flex justify-end" style="margin-top: 1.8rem;">
          <el-button v-if="questionShow && questionIndex > 0" style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;"
                     type="primary" @click="prevQuestion">
            上一题
          </el-button>
          <el-button v-if="questionShow && questionIndex < questions.length" style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;"
                     type="primary" @click="nextQuestion">
            下一题
          </el-button>
        </div>
      </template>

      <div v-if="answerOver" class="answer_over">
        <div class="font20">题目已做完，确认提交吗？</div>
        <div class="cont flex_center">
          <div v-for="(item, index) in questions" :key="index" class="item flex_c_c font24 green cur"
               @click="jumpQuestion(index)">
            {{ index + 1 }}
          </div>
        </div>
        <el-button :loading="submitLoading" style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;"
                   type="primary" @click="submitFn()">
          提交
        </el-button>
      </div>
    </div>

    <!-- 文章单词弹窗 -->
    <div v-if="wordPop" class="modal_cont" @click="closeWordPop(1)">
      <div  :style="{top:infoTop+'px',left:infoLeft+'px'}"
           class="window_cont">
        <div class="word bold font32 flex_center cur">
          {{ translate.word }}
          <img class="play_icon" src="@/assets/reverse/audio-play1.png" @click.stop="translateVoice()"/>
        </div>
        <div class="font24 word_meaning" v-html="translate.translation"></div>
        <div class="wordbtn_cont flex_center_between">
          <div class="word_btn font22 cur" v-loading="addWordLoading"  @click.stop="addWordFun(infoword, 1)">+ 加入生词</div>
          <div class="word_btn font22 bl cur" @click.stop="jumpYoudao(translate.word)">详细解释</div>
        </div>
      </div>
    </div>

    <!-- 题目选项单词弹窗 -->
    <div v-if="questionWordPop" class="modal_cont" @click="closeWordPop(2)">
      <div ref="myElement" v-loading="wordTranslateLoading" :style="{top:wtop+'px',left:wleft+'px'}"
           class="window_cont">
        <div class="word bold font32 flex_center cur">
          {{ word }}
          <img class="play_icon" src="@/assets/reverse/audio-play1.png" @click.stop="playAudio(2)"/>
        </div>
        <div class="font24 word_meaning" v-html="wordTranslate.translation"></div>
        <div class="wordbtn_cont flex_center_between">
          <div class="word_btn font22 cur" @click.stop="addWordFun(word, 2)">+ 加入生词</div>
          <div class="word_btn font22 bl cur" @click.stop="jumpYoudao(word)">详细解释</div>
        </div>
      </div>
      <audio ref="audio" />
    </div>

  </div>
</template>

<script>
import {exerciseInfo, finishCourse, saveAnswer, startExercise, submitExercise} from '@/api/articleExercise.js'
import {article} from '@/api/courseArticle.js'
import {addWord, wordList, wordTranslate} from '@/api/articleWord.js'
import config from '@/config/index.js'
import {checkWord} from "@/api/reverse";

export default {
  components: {},
  props: {
    bearRef: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      addWordLoading: false,
      wordTranslateLoading: false,
      submitLoading: false,
      wordShowStatus: false,
      questionWordPop: false,
      questionShow: false, // 是否显示题目
      answerOver: false,
      voiceShow: false,
      articleId: 0,
      exerciseId: 0,
      userId: 0,
      article: null,
      oidarticle: null,
      exercise: {},
      playStatus: false,
      voiceUrl: '',
      z_c: '转中文',
      wordsList: [],
      infoTop: 0,
      infoLeft: 0,
      wtop: 0,
      wleft: 0,
      wordPop: false,
      infoword: '',
      translate: {},
      word: '',
      firstTime: '',
      lastTime: '',
      isClick: true,
      isAnswer: false,
      wordTranslate: {},
      questionIndex: 0,
      question: {}, // 当前题目
      questions: [], // 所有题目
      isChoose: true,
      answerData: {
        answers: [],
      },
      answerlist: [],
      clockTime: '00:00',
      audio: {},
    }
  },
  created() {
  },
  mounted() {
    this.exerciseId = this.$route.query.exerciseId || 0
    this.userId = this.$route.query.userId || 0
    this.articleId = this.$route.query.articleId || 0
    if (this.exerciseId) {
      this.getExercise()
    }
    if (this.articleId) {
      this.getArticle()
      this.getWordList()
    }
  },
  methods: {
    zh_chGo(e){
      if (this.z_c == '转中文'){
        this.z_c = '转英文'
      }else {
        this.z_c = '转中文'
      }
      // this.article.content = this.oidarticle.translate

    },
    translateVoice() {
      let audio = document.getElementById("reverse-audio");
      audio.src = this.translate.voiceUrl;
      audio.play();
    },
    getExercise() {
      exerciseInfo({id: this.exerciseId, userId: this.userId}).then(res => {
        if (res.error == 0) {
          this.exercise = res.data
        }
      })
    },
    //获取文章详情
    getArticle() {
      this.loading = true
      article({id: this.articleId, userId: this.userId}).then(res => {
        this.loading = false
        if (res.error == 0) {
          this.article = res.data
          this.oidarticle = res.data
          this.questions = res.data.questions
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 加入生词
    addWordFun(word, type) {
      if (!word) {
        this.$message.error({el: this.bearRef.$el, message: '请选择要加入的单词'})
        return
      }

      word = word.trim()

      // 判断word是否是英文单词
      let reg = /^[a-zA-Z]+(?: [a-zA-Z]+)*$/;

      if (!reg.test(word)) {
        this.$message.error({el: this.bearRef.$el, message: '请选择英文单词'})
        return
      }
      if (type == 1) {
        this.addWordLoading = true
      } else if (type == 2) {
        this.wordTranslateLoading = true
      }
      addWord({articleId: this.articleId, word: word, userId: this.userId}).then(res => {
        if (res.error == 0) {
          this.$message.success('加入成功')
          if (type == 1) {
            this.wordPop = false
          } else {
            this.questionWordPop = false
          }
          window.getSelection().removeAllRanges();
          this.getWordList()
        }
      }).finally(() => {
        if (type == 1) {
          this.addWordLoading = false
        } else if (type == 2) {
          this.wordTranslateLoading = false
        }
      })
    },
    getWordList() {
      wordList({articleId: this.articleId, userId: this.userId}).then(res => {
        if (res.error == 0) {
          let words = []
          res.data.forEach(item => {
            words.push(item.word)
          })
          this.wordsList = words
        }
      })
    },
    // 获取单词翻译
    getWordTranslate(word) {
      if (!word) {
        this.$message.error({el: this.bearRef.$el, message: '请选择单词'})
        return
      }
      // 判断word是否是英文单词
      let reg = /^[a-zA-Z]+(?: [a-zA-Z]+)*$/;

      if (!reg.test(word)) {
        this.$message.error({el: this.bearRef.$el, message: '请选择英文单词'})
        return
      }
      if (this.wordTranslateLoading) return
      this.wordTranslateLoading = true
      wordTranslate({word: word}).then(res => {
        this.wordTranslateLoading = false
        if (res.error == 0) {
          this.wordTranslate = res.data
          this.$nextTick(() => {
            try {
              let {bottom} = window.getSelection().getRangeAt(0).getBoundingClientRect()
              let winHeight = window.innerHeight
              if (this.$refs.myElement) {
                let h = this.$refs.myElement.offsetHeight
                if ((bottom + h + 70) > winHeight) {
                  this.wtop = winHeight - h
                }
              }
            } catch (error) {
              console.log(error)
            }
          })
        }
      }).finally(() => {
        this.wordTranslateLoading = false
      })
    },
    //点击播放
    playAudio() {
      let audio = document.getElementById("reverse-audio");
      audio.src = this.wordTranslate.voiceUrl;
      audio.play();
    },
    playEnd() {
      this.voiceUrl = ''
    },
    // 文章播放
    articlePlayAudio() {
      if (this.playStatus) {
        this.$refs.audioArticle.pause()
        this.playStatus = false
        return
      }
      if (this.article.status && this.article.status.value == 2) {
        this.$message.warning({el: this.bearRef.$el, message: '文章音频正在转换中，请稍等下再播放'})
        return
      }
      this.playStatus = true
      this.$nextTick(() => {
        this.$refs.audioArticle.play()
      })
    },
    // 文章播放结束
    articlePlayEnd() {
      this.playStatus = this.playStatus ? false : this.playStatus
    },
    //隐藏生词
    wordHide() {
      this.wordShowStatus = false
      this.article.content = this.article.content.replace(/<span class="tagword">/g, '')
      this.article.content = this.article.content.replace(/<\/span>/g, '')
    },
    //显示生词
    wordShow() {
      if (this.wordsList.length == 0) {
        this.$message.error({el: this.bearRef.$el, message: '暂无已加入的生词'})
        return
      }
      this.wordShowStatus = true
      this.wordsList.forEach(item => {
        let str = this.article.content.replace(new RegExp(item, "g"), '<span class="tagword">' + item + '</span>')
        this.article.content = str
      })
    },
    // 做题
    showQuestionFun() {
      if (this.questions.length == 0) {
        this.$message.error({el: this.bearRef.$el, message: '暂未设置答题题目'})
        return
      }
      this.question = this.questions[this.questionIndex]
      this.startExerciseFun()
    },
    // 识记生词
    rememberWord() {
      if (this.wordsList.length == 0) {
        this.$message.error({el: this.bearRef.$el, message: '暂无已加入的生词'})
        return
      }
      let path = '/reading/remember?exerciseId=' + this.exerciseId + '&articleId=' + this.articleId
      if (this.userId) {
        path += '&userId=' + this.userId
      }
      this.$router.push(path)
    },
    // 跳转有道词典
    jumpYoudao(word) {
      let url = 'https://dict.youdao.com/result?word=' + word + '&lang=en'
      window.open(url)
    },
    // 选择选项
    chooseOptionFun(e) {//选择
      // if (!this.isClick) return
      this.firstTime = ''
      this.lastTime = ''
      this.questionWordPop = false

      let obj = {
        id: e.questionId,
        answer: [e.prefix]
      }
      if (!this.answerlist) {
        this.answerlist.push({
          index: this.questionIndex,
          answer: [e.prefix]
        })
      } else {
        let indexs = this.answerlist.findIndex(item => item.index == this.questionIndex)
        if (this.question.type.value == 1) {
          // 单选
          if (indexs >= 0) {
            this.answerlist.splice(indexs, 1)
          }
          this.answerlist.push({
            index: this.questionIndex,
            answer: [e.prefix]
          })
        } else if (this.question.type.value == 2) {
          // 多选
          if (indexs >= 0) {
            let index = this.answerlist[indexs].answer.findIndex(item => item == e.prefix)
            if (index >= 0) {
              this.answerlist[indexs].answer.splice(index, 1)
            } else {
              this.answerlist[indexs].answer.push(e.prefix)
            }
            obj.answer = this.answerlist[indexs].answer
          } else {
            this.answerlist.push({
              index: this.questionIndex,
              answer: [e.prefix]
            })
            obj.answer = [e.prefix]
          }

        }
      }

      let _indexs = this.answerData.answers.findIndex(item => item.id == e.questionId)
      _indexs >= 0 ? this.answerData.answers.splice(_indexs, 1) : ''
      if (this.question.type.value == 2 && obj.answer.length) {
        this.answerData.answers.push(obj)
      } else {
        this.answerData.answers.push(obj)
      }

    },
    checkOptionChoose(option) {
      // 判断当前选项是否被选中
      let indexs = this.answerlist.findIndex(item => item.index == this.questionIndex)
      if (indexs >= 0) {
        let index = this.answerlist[indexs].answer.findIndex(item => item == option.prefix)
        return index >= 0 ? true : false
      } else {
        return false
      }
    },
    startExerciseFun() {
      let params = {
        exerciseId: this.exerciseId,
        articleId: this.articleId,
        userId: this.userId
      }
      this.loading = true
      startExercise(params).then(res => {
        this.loading = false
        if (res.error == 0) {
          this.isAnswer = true
          this.questionShow = true
          this.clock()
          this.getExercise()
        } else if (res.error == 504) {
          this.finiseCourseFun()
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 保存答案
    async saveAnswerFun() {
      if (this.answerData.answers && this.answerData.answers.length < 1) {
        return false
      }

      this.answerData.exerciseId = this.exerciseId
      this.answerData.logId = this.exercise ? this.exercise.logId : 0
      this.answerData.userId = this.userId

      let res = null
      res = await saveAnswer(this.answerData)
      if (res.error !== 0) {
        if (res.error == 503 || res.error == 504) {
          throw res.error
        }
      }
    },
    // 交卷
    async submitFn(isRequestSaveAnswer, isExpire) {
      if (isRequestSaveAnswer) {
        try {
          await this.saveAnswerFun()
        } catch (error) {
          if (error == 503) {
            return
          } else if (error == 504) {
            this.submitFn(false, true)
          }
        }
        return
      }

      // 判断clockTime是否超过60秒
      if (!isExpire) {
        let time = this.clockTime.split(':')
        if (parseInt(time[0]) * 60 + parseInt(time[1]) < 60) {
          this.$message.warning( '60秒之内不能提交，请您再确认下答案')
          return
        }
      }

      // 将clockTime转换成秒
      let clockTime = this.clockTime.split(':')
      let useTime = parseInt(clockTime[0]) * 60 + parseInt(clockTime[1])

      let param = {
        logId: this.exercise ? this.exercise.logId : 0,
        exerciseId: this.exerciseId,
        userId: this.userId,
        useTime: useTime
      }

      this.submitLoading = true
      await submitExercise(param).then(res => {
        this.submitLoading = false
        if (res.error == 0) {
          if (isExpire) {
            // 到期结束课程
            this.finiseCourseFun()
          } else {
            this.$message.success({el: this.bearRef.$el, message: '提交成功'})
            let path = '/reading/analysis?exerciseId=' + this.exerciseId
            if (this.userId) {
              path += '&userId=' + this.userId
            }
            this.$router.push(path)
          }
        }
      }).finally(() => {
        this.submitLoading = false
      })
    },
    // 下课
    async finiseCourseFun() {
      this.loading = true
      await finishCourse({
        exerciseId: this.exerciseId,
        userId: this.userId
      }).then(res => {
        this.loading = false
        if (res.error === 0) {
          this.$router.push({path: '/index'})
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 详情词汇
    onmouseup() {
      if (window.getSelection) {
        this.infoTop = 0
        this.infoLeft = 0
        let text = window.getSelection().toString().trim(); //选中文字
        if (!text.trim()) {
          this.wordPop = false
          return
        }
        let {left, top, height, width} = window.getSelection().getRangeAt(0).getBoundingClientRect()
        checkWord({ word: text }).then((res) => {
          this.translate = res.data;
        });
        this.infoword = text
        this.infoTop = top + 70
        this.infoLeft = left
        this.wordPop = true
      } else if (document.selection && document.selection.type != "Control") {
        //ie9以下的支持，可不考虑
        $scope.mark.selectionText[0] = document.selection.createRange().text;
      }
    },
    mouseDownFn() {
      this.firstTime = new Date().getTime()
    },
    // 选项词汇
    onmouseup_word(e) {
      console.log(123)

      this.lastTime = new Date().getTime()
      if (window.getSelection) {

        this.wtop = 0
        this.wleft = 0
        let text = window.getSelection().toString().trim(); //选中文字
        // 鼠标点击和抬起的时间差<200，或者选中文本为空时，可以触发点击
        if ((this.lastTime - this.firstTime) < 200 || text === '') {
          this.isClick = true
        } else {
          this.isClick = false
        }
        if (!text.trim()) {
          this.questionWordPop = false
          return
        }

        // 判断text是否是英文单词
        let reg = /^[a-zA-Z]+(?: [a-zA-Z]+)*$/;
        if (!reg.test(text)) {
          this.$message.error({el: this.bearRef.$el, message: '请选择英文单词'})
          return
        }
        let start = window.getSelection().anchorOffset; //开始位置
        let end = window.getSelection().focusOffset;  //结束位置
        let {left, top, right} = window.getSelection().getRangeAt(0).getBoundingClientRect()
        this.word = text

        this.wtop = top + 70
        this.wleft = left
        this.questionWordPop = true
        let w = 0
        let winWidth = window.innerWidth
        this.$nextTick(() => {
          w = this.$refs.myElement.offsetWidth
          if ((right + w) > winWidth) {
            this.wleft = winWidth - w
          }
        })

        this.getWordTranslate(this.word)

      } else if (document.selection && document.selection.type != "Control") {
        //ie9以下的支持，可不考虑
        $scope.mark.selectionText[0] = document.selection.createRange().text;
      }
    },
    // 跳转题目
    jumpQuestion(index) {
      this.questionIndex = index
      this.question = this.questions[this.questionIndex]
      this.answerOver = false
      this.questionShow = true
    },
    // 下一题
    async nextQuestion() {
      if (this.questionIndex < this.questions.length - 1) {
        this.questionIndex++
        this.question = this.questions[this.questionIndex]
        try {
          await this.saveAnswerFun()
        } catch (error) {
          if (error == 503) {

          } else if (error == 504) {
            this.submitFn(false, true)

          }
        }
      } else {
        this.submitFn(true)
        this.questionShow = false
        this.answerOver = true
      }
    },
    // 上一题
    prevQuestion() {
      if (this.questionIndex > 0) {
        this.questionIndex--
        this.question = this.questions[this.questionIndex]
      }
    },
    // 计时器
    clock() {
      let time = 0
      let timer = setInterval(() => {
        time++
        let m = parseInt(time / 60)
        let s = time % 60
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s
        this.clockTime = m + ':' + s
      }, 1000)
    },
    closeWordPop(type) {
      if (type == 1) {
        this.wordPop = false
      } else {
        this.questionWordPop = false
      }
      window.getSelection().removeAllRanges();
    },
    // 打印
    printFun() {
      let url = config.basePrintUrl + '/article?id=' + this.articleId
      window.open(url)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.po {
  width: 0;
  height: 0;
}

.tagword {
  background-color: #019E69;
  background: #019E69;
}

.modal_cont {
  width: 100%;
  height: 100%;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.text_cont, .word_text {
  user-select: text;

  &::selection {
    background: #019E69;
    color: #fff;
  }

  ::-moz-selection {
    background: #019E69;
    color: #fff;

  }
}

.green {
  background: #19C14B;
}

.box_cont {
  overflow: hidden;
}

.topic_cont {
  width: 65%;
}

.answer_tit {
  position: relative;

  .last_icon {
    position: absolute;
    left: 0;
    width: 3rem;
    height: 3rem;
  }

  .next_icon {
    position: absolute;
    right: 0;
    width: 3rem;
    height: 3rem;
  }
}

.answer_cont {
  width: 35%;
  height: auto;
  overflow: auto;
  background: #F7F8FA;
  padding: 3.5rem 4rem;

  &::-webkit-scrollbar {
    width: 0px;
    height: 1px;
  }

  /* 滑块部分 */
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #019E69;
  }

  /* 轨道部分 */
  &::-webkit-scrollbar-track {
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #fff;
    border-radius: 5px;
  }

  .title {
    width: 23.7rem;
    height: 6rem;
    border-radius: 14.3rem;
    background: rgba(#F69B2C, .1);
    margin: 0 auto;

    .icon {
      width: 4rem;
      height: 4rem;
      margin-right: 1rem;
    }

    .text {
      font-size: 4rem;
      color: #F69B2C;
    }
  }

  .option_row {
    border: 0.5px solid #019E69;
    border-radius: 4px;
    padding: 2.6rem 2rem;
    margin-top: 2.4rem;

    .option {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px solid #019E69;
      margin-right: 3rem;
    }

    .status1 {
      background: #019E69;
      color: #fff;
    }
  }

  .status {
    background: rgba(11, 154, 255, 0.1);
  }

  .work_cont {
    margin-top: 3rem;

    .text {
      margin-top: 1.6rem;
    }
  }
}

.head_cont {
  color: #3A3F5E;
  font-size: 3.2rem;
  line-height: 6.4rem;
  margin-top: 2.4rem;
  user-select: text;

  &::selection {
    background: #019E69;
    color: #fff;
  }

  ::-moz-selection {
    background: #019E69;
    color: #fff;

  }

  .tag {
    width: 5.5rem;
    height: 3.4rem;
    border-radius: 6px;
    color: #fff;
    background: #019E69;
    padding: 5px 7px;
  }
}

.answer_over {
  padding: 4rem;
  background: #fff;
  color: #9E9E9E;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rem;

  .cont {
    // width: 100%;
    margin-top: 5.4rem;
    margin-bottom: 10rem;
    flex-wrap: wrap;

    .item {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
      color: #fff;
      margin-right: 1rem;

      &:last-child(5n) {
        margin-right: 0;
      }
    }

  }
}

.info_cont {
  position: fixed;
  min-width: 26.8rem;
  // height: 16.1rem;
  border-radius: 1rem;
  opacity: 1;
  background: #FFFFFF;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 0 2.4rem;

  .word {
    color: #3A3F5E;
    padding: 1rem 0;
    border-bottom: 1px solid #F0F2F4;
    line-height: 7rem;
  }

  .word_btn {
    text-align: center;
    color: #019E69;
    // padding: 2.4rem 0;
    line-height: 7rem;
    font-size: 2.2rem;
  }
}

.window_cont {
  position: fixed;
  min-width: 40.6rem;
  // height: 16.1rem;
  border-radius: 1rem;
  opacity: 1;
  background: #FFFFFF;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 0 2.4rem;

  .word {
    color: #3A3F5E;
    padding: 1rem 0;
    line-height: 7rem;

    .play_icon {
      width: 3rem;
      height: 3rem;
      margin-left: 1rem;
    }
  }

  .word_btn {
    width: 50%;
    text-align: center;
    color: #019E69;
    // padding: 2.4rem 0;
    line-height: 4rem;
    font-size: 2.2rem;

  }

  .word_meaning {
    // min-width: 120rem;
    // max-width: 100%;
    line-height: 4.8rem;
    max-height: 60vh;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 4px;
      height: 1px;
    }

    /* 滑块部分 */
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: #019E69;
    }

    /* 轨道部分 */
    &::-webkit-scrollbar-track {
      //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #fff;
      border-radius: 5px;
    }
  }

  .wordbtn_cont {
    border-top: 1px solid #F0F2F4;
    padding: 1.5rem 0;
    margin-top: 2.7rem;
  }

  .bl {
    border-left: 0.5px solid #F0F2F4;
  }
}

.tit_cont {
  width: 100%;
  padding: 4.2rem 14rem 1.6rem;
  text-align: left;
}

.level_cont {
  margin-top: 2rem;

  .print_cont {
    width: 13.6rem;
    height: 4.4rem;
    border-radius: 4px;
    background: #F7F8FA;

    .icon {
      width: 2.4rem;
      height: 2.4rem;
      margin-right: 1rem;
    }
  }
}

.level_row {
  color: #626780;

  .level_icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 5px;

    .icon {
      width: 2.4rem;
      height: 2.4rem;
    }
  }
}

.text_cont {
  padding: 0 14rem;
  font-family: Open Sans;
  font-size: 3.6rem;
  line-height: 7.2rem;
  letter-spacing: 0em;
  text-align: left;
  flex: 1;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  // overflow-wrap: break-word;
  &::-webkit-scrollbar {
    width: 6px;
    height: 1px;
  }

  /* 滑块部分 */
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #019E69;
  }

  /* 轨道部分 */
  &::-webkit-scrollbar-track {
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #fff;
    border-radius: 5px;
  }
}

.justify-end {
  padding-left: 2rem
}

.btn_cont {
  width: 100%;
  // padding: 2rem calc(20% + 6px) 0;
  // padding: 2rem 71.7rem 0 10rem;
  padding: 4.2rem 2rem;
  // border-top: 1px solid #4762BB;
  border-top: 1px solid #F7F8FA;

  .left_num {
    margin: auto 0;
    font-size: 3.6rem;
    font-weight: bold;

    .num1 {
      color: #FF5252;
    }

    .num2 {
      color: #767676;

    }
  }
}

.back_img {
  width: 4rem;
  height: 4rem;

  &:hover {
    content: url(@/assets/img/back_1.png);
  }
}

.w-full {
  width: 100%;
  // padding: 1rem 71.7rem 0 10rem;
}

</style>